<template>
  <div class="f-login-container">
    <div class="f-language-selector">
      <!-- <el-select style="width: 90px" size="small" v-model="selectedLanguage" @change="changeLanguage">
        <el-option v-for="item in languageOptions" :key="item.value" :label="item.label"
          :value="item.value"></el-option>
      </el-select> -->
      <el-button style="width: 70px;margin-left: 10px;" size="small" round @click="signIn">{{
        $t("login.signIn")
        }}</el-button>
      <el-button style="width: 70px" size="small" round @click="register">{{
        $t("login.register")
        }}</el-button>
    </div>
    <el-card class="f-login-card">
      <div>
        <div class="f-login-title">{{ $t("login.title") }}</div>
      </div>
      <div>
        <div class="f-login-text">{{ $t("login.verification") }}</div>
      </div>
      <div>
        <div style="color: #909399;margin-bottom: 45px;">
          {{ $t("login.enterCode") }}
        </div>
      </div>
      <div>
        <div style="display: flex;justify-content: center;margin-bottom: 25px;">
          <el-input v-model="form.inputValue1" maxlength="1" class="v-verification-code"
            @keyup.enter="checkCode"></el-input>
          <el-input v-model="form.inputValue2" maxlength="1" style="margin-left: 10px;margin-right:10px;"
            class="v-verification-code" @keyup.enter="checkCode"></el-input>
          <el-input v-model="form.inputValue3" maxlength="1" style="margin-left: 10px;margin-right:10px;"
            class="v-verification-code" @keyup.enter="checkCode"></el-input>
          <el-input v-model="form.inputValue4" maxlength="1" class="v-verification-code"
            @keyup.enter="checkCode"></el-input>
        </div>
        <div v-show="errorMessage" style="color: #FF6060;font-size: 12px;position: fix;margin-top: -45px;
          display: flex;justify-content: center;margin-bottom: 40px;">
          <span>{{ this.$t('login.checkCode') }}</span>
        </div>
      </div>
      <div style="margin-bottom: 10px;display: flex;justify-content: center;">
        <span style="color: #838BA1;font-size: 14px;">{{ this.$t('login.codeExpire') }}</span>
        <span @click="resendCode" style="color: #FEBC1C;font-size: 14px;cursor: pointer;">{{ this.$t('login.resendCode') }}</span>
      </div>
      <el-row>
        <el-col :span="24">
          <el-button :loading="verificationLoading" @click="verificationCode"
            style="background-color: #DADADA; color: #8391A1; width: 100%;font-weight:bold;">{{ $t("login.verify")
            }}</el-button>
        </el-col>
      </el-row>
      <div class="verification-bottom-text">
        <span>{{ $t("login.rememberPassword") }}</span>
        <router-link class="f-common-link" to="/login">{{ $t('login.loginText') }}</router-link>
      </div>
    </el-card>
  </div>
</template>

<script>

import { checkingVerifyCode, sendVerifyCode } from '../../api/userService'

export default {
  data() {
    return {
      form: {
        inputValue1: '',
        inputValue2: '',
        inputValue3: '',
        inputValue4: ''
      },
      selectedLanguage: 'en',
      languageOptions: [
        { value: 'en', label: 'English' },
        { value: 'zh', label: '中文' }
      ],
      verificationLoading: false,
      errorMessage: false,
      email: '',
    }
  },
  methods: {
    async verificationCode() {
      
      // 业务逻辑
      if (this.form.inputValue1 === '' || this.form.inputValue2 === '' ||
       this.form.inputValue3 === '' || this.form.inputValue4 === '') {
        // this.$message.error(this.$t('login.completeCode'))
        this.errorMessage = true;
        return
      }
      this.errorMessage = false;
      var code = this.form.inputValue1 + this.form.inputValue2 + this.form.inputValue3 + this.form.inputValue4;
      this.email = this.$route.query.email;
      this.verificationLoading = true
      await checkingVerifyCode(this.$route.query.email, code, 'forgot').then(res => {
        if (res.code == 200) {
          this.$message.success(this.$t('login.verificationSuccess'));
          setTimeout(() => {
            this.$router.push({
              name: 'resetPassword', query: {
                restEmail: this.email
              }
            });
          }, 1000);
        } else {
          this.verificationLoading = false;
          this.$message.error(res.msg)
        }
      })
      this.verificationLoading = false;
    },
    changeLanguage(e) {
      this.$nextTick(() => {
        localStorage.setItem('lang', e);
        this.$i18n.locale = e;
      })
    },
    register(e) {
      this.$router.push("/register")
    },
    signIn() {
      this.$router.push("/login")
    },
    async resendCode() {
      this.verificationLoading = true;
      await sendVerifyCode(this.$route.query.email, 'reSend', 'forgotPage').then(res => {
        if (res.code == 200) {
          this.$message.success(this.$t('login.sendSuccess'));
        } else {
          this.verificationLoading = false;
          this.$message.error(res.msg);
        }
      })
      this.verificationLoading = false;
    }
  },
  mounted() {
    // 页面刷新后默认语言为英语
    localStorage.removeItem('lang')
    localStorage.setItem('lang', 'en')
  }
}
</script>

<style scoped>

::v-deep .select-popper .el-input__inner {
  border-radius: 15px;
}
::v-deep .el-input__placeholder {
  text-align: center;
}

@import "../../assets/css/Verification.css";

@media (max-width: 600px) {
  .el-form {
    width: 100%;
  }
}
</style>
